<template>
  <view>
		<view class='header'style="align-items: center;">
    <!-- 头部搜索框 -->
    <searchBar></searchBar>
		</view>
		<view style="height: 175rpx; display: flex;justify-content: center;align-items: flex-end;font-size: 40rpx; color: #7d00ff;padding-bottom: 20rpx;box-sizing: border-box;">
					加载中哟~~~
		</view>
    <!-- 轮播图 -->
    <view class="banner_container" >
      <swiper
        :autoplay="true"
        indicator-active-color="#7d00ff"
        :indicator-dots="true"
        :circular="true"
        :interval="2000"
        style="width: 750rpx; height: 340rpx"
      >
        <swiper-item v-for="(item, index) in bannerData" :key="index">
          <navigator
            :url="item.navigator_url"
            style="width: 100%; height: 100%"
          >
            <image
              :src="item.image_src"
              style="width: 100%; height: 100%"
            ></image>
          </navigator>
        </swiper-item>
      </swiper>
    </view>
    <!-- 分类列表 -->
    <view class="navList">
      <view class="navCategory" v-for="(item, index) in navList" :key="index">
        <navigator
          :open-type="item.open_type"
          url="/pages/category/index"
          style="width: 100%; height: 100%"
        >
          <image
            :src="item.image_src"
            style="width: 100%; height: 100%"
          ></image>
        </navigator>
      </view>
    </view>
    <!-- 楼层 -->
    <block v-for="(item, index) in floordata" :key="index">
      <view class="header_title">
        <image :src="item.floor_title.image_src" class="titleImage"></image>
      </view>
      <view class="floor">
        <view
          :style="{
            width: `${item.product_list[0].image_width}rpx`,
            height: '100%',
          }"
        >
          <image
            :src="item.product_list[0].image_src"
            class="floor_title_image"
            @click="handelrToQuery(item.product_list[0].navigator_url)"
          ></image>
        </view>
        <view class="goods_category">
          <block v-for="(v, i) in item.product_list" :key="i">
            <image
              v-if="i != 0"
              :src="v.image_src"
              style="width: 233rpx; height: 188rpx"
              @click="handelrToQuery(v.navigator_url)"
            >
            </image>
          </block>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import searchBar from "@/components/searchBar.vue";
export default {
  components: {
    searchBar,
  },
  data() {
    return {
      bannerData: [],
      navList: [],
      floordata: [],
    };
  },
  onLoad() {
    this.getBannerData();
    this.getCategoryData();
    this.getFloorData();
  },
	 onPullDownRefresh(){
		 Promise.all([this.getBannerData(),this.getCategoryData(),this.getFloorData()]).then(()=>{
			 uni.stopPullDownRefresh()
		 })
	 },
  methods: {
    // 封装轮播图数据
    async getBannerData() {
      const [err, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      });
      res.data.message = res.data.message.map((item) => {
        item.navigator_url = item.navigator_url.replace("main", "index");
        return item;
      });
      if (res.data.meta.status === 200) {
        this.bannerData = res.data.message;
      }
    },
    // 封装分类数据
    async getCategoryData() {
      let [err, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
      });
      this.navList = res.data.message;
    },
    // 封装楼层数据
    async getFloorData() {
      let [err, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
      });
      res.data.message.forEach((item) => {
        item.product_list.forEach((v) => {
          let query = v.navigator_url.split("?")[1];
          v.navigator_url = "/pages/goods_list/index?" + query;
        });
      });
      this.floordata = res.data.message;
    },
    // 点击楼层图片跳转
    handelrToQuery(url) {
      uni.navigateTo({ url });
    },
  },
};
</script>

<style lang="less">
	.header {
	    display: flex;
	    width: 100%;
	    height: 180rpx;
	    box-sizing: border-box;
	    position: fixed;
	    z-index: 1;
	    flex-direction: column;
	    border-radius: 0 0 8px 8px;
	    box-shadow: 0 0 2px #6900ff;
	    padding: 20rpx 40rpx 20rpx 40rpx;
	    color: #fff;
	    background: #6900ff url('') no-repeat center bottom;
	}
.header .author {
    position: absolute;
    bottom: 20rpx;
    right: 40rpx;
}
.searchView {
  width: 750rpx;
  height: 100rpx;
  background-color: #7d00ff;
  padding: 10rpx, 24rpx;
}
.input_search {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700rpx;
  height: 80rpx;
  margin: 0 auto;
  background-color: #fff;
  color: #767676;
  font-size: 26rpx;
}
.navList {
  margin: 15rpx 0;
  display: flex;
  justify-content: space-around;
  height: 140rpx;
}
.navCategory {
  display: flex;
  flex-direction: column;
  width: 128rpx;
  height: 140rpx;
}
.header_title {
  margin-top: 50rpx;
  height: 59rpx;
  width: 100%;
}
.titleImage {
  height: 100%;
  width: 100%;
}
.floor {
  padding-left: 15rpx;
  display: flex;
  justify-content: space-around;
  height: 386rpx;
}
.floor_src {
  width: 232rpx;
  height: 386rpx;
}
.floor_title_image {
  width: 100%;
  height: 100%;
}
.goods_category {
  display: flex;
  justify-content: space-evenly;
  align-content: space-between;
  flex-wrap: wrap;
  flex: 1;
}
 /deep/.header .searchView {
    width: 750rpx;
    height: 100rpx;
    background-color: #7d00ff47;
    padding: 10rpx,24rpx;
		margin-top: 20rpx;
}
</style>
